<template>
    <div class="splist">
        <el-form :inline="true" size="large">
            <inp label="商品编号: " />
            <inp label="商品名称: " />
            <inp label="商品分组: " />
            <inp label="商品标签: " />
            <but />
        </el-form>

        <tab class="tabclass" :foo="tabelsj" :head="header1">
            <Dialog @subadd="addList(piniaADD, onlyId)"> + 发布商品</Dialog>
            <!-- tabel按钮 -->
            <template #but="butPorps">
                <!-- {{butPorps.text.id}} -->
                <Dialog @subadd="Change(butPorps,onlyId)">修改</Dialog>
                <el-button @click="shanChu(butPorps,onlyId)" :id="butPorps.text.id">删除</el-button>
            </template>
        </tab>
    </div>
</template>
<script>
import tab from "../../components/table.vue"
import { storeToRefs } from "pinia";
export default {
    components: { tab },
}
</script>
<script setup>
import { onMounted, computed, reactive, provide, ref, toRefs } from "vue"
//不能被封装
import { res } from "@/unit/index.js"
//不能被封装
import { useCounterStore } from "@/pinia/index.js"
//能不能被封装？？？？？
import { listAll } from "@/api/tabel.js"
//不能被封装
import { onlyId } from "../../commonjs/router-tabel-id"
//接口方法
import { loading,Delete,xiugai } from "../../commonjs/index.js"
const store = useCounterStore()
/*
header1导航标签和模态框标签格式数据
tagleft = 左侧导航栏标签
*/
const header1 = [{ key: 'name', name: "商品名称" }, { key: 'price', name: "售价" }, { key: 'img', name: "商品来源" }, { key: 'same', name: "排序" }]
const tagleft = [{ name: "商品列表", path: "/start/sp/list" }, { name: "商品分类", path: "/start/sp/fl" }, { name: "商品品牌", path: "/start/sp/pp" }]

//添加表格数据
const piniaADD = computed(() => {
    return store.spform
})

//执行表格函数  
function addList(pass, onlysj) {
    listAll(pass, "POST", onlysj).then(data => {
        tabelsj.value.push(data.data)
        // localStorage.setItem("onlyId", JSON.stringify(onlyId))
    })
    store.$state = { spform: {} }
}


//localstorage数据
// const splist = JSON.parse(localStorage.getItem(onlyId))
//渲染dom数据
const tabelsj = ref([])

//删除函数

function shanChu(sj,onlyid){
    Delete(sj, onlyid)
        .then(data => {
            tabelsj.value = data
            // localStorage.setItem(onlyid, JSON.stringify(onlyId))
        })
}


//修改
function Change(e,id){
    xiugai(e,id)
    .then(data => {
            tabelsj.value = data
            // localStorage.setItem(onlyId, JSON.stringify(onlyId))
        })
}

onMounted(() => {
    store.$patch({
        //结构字符
        taglet: tagleft,
        formListName: header1,
    })
    //双向绑定模板
    store.$state.formmodel = { name: "", price: "", img: "", same: "" }

    //初始化dom数据
    const sj =  loading(onlyId.value).then(data=>{
        tabelsj.value = data
        // console.log(tabelsj.value)
    })
})




//button样式
provide("csstable", "margin:15px")

</script>

<style scoped >
/* .splist  */
</style>
<style>
.el-form {
    background-color: white;
    padding: 10px;
}

.splist {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tabclass {
    flex: 1
}
</style>